//注册页面

<template>
  <div>
    <van-nav-bar title="编辑信息" left-arrow @click-left="onClickLeft" />
    <van-cell-group>
      <van-field v-model="info.nickname" label="昵称" placeholder="昵称" />
      <van-field v-model="info.phone" label="手机" placeholder="手机" />
      <!-- <van-field v-model="info.sgin" label="签名" placeholder="签名" /> -->
      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="info.sex" direction="horizontal">
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
            <van-radio name="3">未知</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field name="uploader" label="头像上传">
        <template #input>
          <van-uploader
            v-model="uploader"
            :max-count="1"
            :after-read="afterRead"
          />
        </template>
      </van-field>
    </van-cell-group>

    <div style="margin: 16px">
      <van-button round block type="primary" @click="comfire">
        提交修改
      </van-button>
    </div>
  </div>
</template>

<script>
  import axios from '../utils/request'
import { Toast } from "vant";
export default {
  computed: {},
  data() {
    return {
      info: {},
      // { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }
      uploader: [],
    };
  },
  mounted() {
    //vue 的生命周期函数
    //去缓存中的数据
    //JSON.parse JSON字符串转换为对象
    // let user =JSON.parse(localStorage.getItem("userInfo"))
    // this.userInfo= user

    //取接口的数据
    axios
      .get("/getUser")
      .then((response) => {

          this.info = response.data.data;
          this.info.sex = this.info.sex + "";
          this.uploader.push({ url: this.info.avtar });

      });
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    afterRead(file) {
      file = file.file; //这个是图片
      let data = new FormData();
      file.status = "uploading";
      file.message = "上传中"; //用来显示UI界面的
      data.append("file", file); //要上传的文件
      data.append("type", 1);
      axios
        .post("/uploadFile", data, )
        .then((response) => {
          if (response.data.code == 0) {
            file.status = "done"; //上传成功，改成done，就不会转圈圈了
            this.info.avtar = response.data.data;
          } else {
            file.status = "failed";
            file.message = "失败";
          }
        });
    },
    comfire() {
      Toast.loading({
        message: "发布中...",
      });
      axios
        .post("/updateUserInfo", this.info, )
        .then((response) => {

            Toast.success(response.data.msg);
            this.$router.back();

        });
    },
  },
};
</script>

<style>
</style>